import { FC, ReactElement, useCallback, useState } from "react";
import ImageSelect from "@/components/FeedQRcode/ImageSelect";
import { Container } from "@/components/BUI";
import Title from "@/components/FeedQRcode/Title";
import Price from "@/components/FeedQRcode/Price";
import GenerateQRCode from "@/components/FeedQRcode/GenerateQRCode";
import { ICode, ICodeKey } from "@/components/FeedQRcode/types";

interface IProps {}

const FeedQRCode: FC<IProps> = (): ReactElement => {
  const [code, setCode] = useState<ICode>({});

  const changeCode = useCallback(
    (key: ICodeKey) => (value) => {
      setCode((prevCode) => ({ ...prevCode, [key]: value }));
    },
    []
  );

  return (
    <Container
      fill
      style={{
        display: "flex",
        alignItems: "center",
        flexDirection: "column",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <ImageSelect
        imagePath={code.imagePath}
        changeCodeImage={changeCode(ICodeKey.IMAGE_PATH)}
      />
      <Title changeTitle={changeCode(ICodeKey.TITLE)} />
      <Price changePrice={changeCode(ICodeKey.PRICE)} />
      <GenerateQRCode code={code} />
    </Container>
  );
};

export default FeedQRCode;
